<script setup lang="ts">
  import { PropType, watch, ref } from "vue";
  import { ElForm, ElFormItem, FormInstance } from "element-plus";
  import Rich from "@/components/Rich";
  import Banner from "@/components/Banner.vue";
  const
    props = defineProps({
      modelValue: { type: Object as PropType<gt.sql.goods>, default: format.def.goods, },
      disabled: { type: Boolean, default: false }
    }),
    rules = ref({
      name: { required: true, message: "名称2-80个字符", trigger: "blur", min: 2, max: 80, },
      type: { required: true, message: "请选择商品类型", trigger: "blur", min: 1 },
    }),
    tree = ref<Tree<gt.sql.goodsType>>([]),
    opt = ref({
      expandTrigger: "hover",
      checkStrictly: false,
      emitPath: false,
      value: "id",
      label: "name"
    }),
    rel = ref<InstanceType<typeof Rich>>(),
    entity = ref<FormInstance>();
  async function init() {
    tree.value = await gd.goodsTypeTree;
  }
  watch(() => props, init, { deep: true, immediate: true });
  function changePid() {
    if (!props.modelValue.pid) {
      props.modelValue.pid = "";
    }
  }
  defineExpose({
    validate() {
      return new Promise<boolean>(async (resolve) => {
        if (entity.value) {
          for (const e of props.modelValue.banner) {
            if (e.upload instanceof Function) {
              await e.upload();
            }
          }
          entity.value.validate().then(async (r) => {
            if (r && rel.value) {
              props.modelValue.des = await rel.value.upload(async (base64) => {
                return await api.upload("goods.jpg", base64, {}, "goods");
              });
            }
            resolve(r);
          }).catch(() => { resolve(false); });
        } else {
          resolve(false);
        }
      });
    },
    resetFields() { entity.value?.resetFields(); }
  });
</script>
<template>
  <ElForm class="goods xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="7em">
    <ElFormItem label="id" prop="id"><el-input v-model="modelValue.id" disabled placeholder="系统自动生成" /></ElFormItem>
    <ElFormItem label="创建时间" prop="createTime"><el-input
        :modelValue="modelValue.createTime ? modelValue._createTime : '系统自动生成'" disabled /></ElFormItem>
    <ElFormItem label="创建人" prop="_user.name"><el-input :modelValue="modelValue._user?.name" placeholder="系统自动生成"
        disabled />
    </ElFormItem>
    <ElFormItem label="商品类型" prop="type"><el-cascader v-model="modelValue.type" :options="tree" :props="opt"
        :disabled="disabled" clearable collapse-tags-tooltip placeholder="请选择商品类型" @change="changePid" />
    </ElFormItem>
    <ElFormItem label="商品名称" prop="name"><el-input v-model="modelValue.name" placeholder="请输入名称" :disabled="disabled" />
    </ElFormItem>
    <ElFormItem label="销量" prop="sold">
      <el-input-number :min="0" v-model="modelValue.sold" placeholder="请输入销量" :disabled="disabled" />
    </ElFormItem>
    <ElFormItem label="标签1" prop="tagOne">
      <el-input v-model="modelValue.tagOne" placeholder="请输入标签1" :disabled="disabled" />
    </ElFormItem>
    <ElFormItem label="标签2" prop="tagTow">
      <el-input v-model="modelValue.tagTow" placeholder="请输入标签2" :disabled="disabled" />
    </ElFormItem>

    <ElFormItem label="价格(单位:分)" prop="money"><el-input-number v-model="modelValue.money" :min="0" :step="100"
        placeholder="请输商品价格" :disabled="disabled" /></ElFormItem>
    <ElFormItem class="wf" label="展示横幅" prop="banner">
      <Banner v-model="modelValue.banner" :disabled="disabled" />
    </ElFormItem>
    <ElFormItem class="wf" label="商品详情" prop="des" style="height:40em">
      <Rich v-model="modelValue.des" :disabled="disabled" ref="rel" />
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss" scoped>
  .goods {
    position: relative;
    >:not(.wf) {
      width: 49%;
    }
  }
</style>